<template>
	<view :class="['item','item-'+index]" @click="openServeDetail(item)">
		<view class="image">
			<lazy-load-image class="img" :image="item.img_big" :errorImg="config.errorImage.img" imgMode='aspectFill' height="188rpx" />
		</view>
		<view class="info">
			<view class="name">
				<text>{{item.title}}</text>
			</view>
			<view class="tags">
				<view class="item-tag" v-for="(item_tag,index_tag) in item.tag" :key="index_tag">
					<text>{{item_tag}}</text>
				</view>
			</view>
			<view class="value">
				<view class="price">
					<text class="unit">¥</text>
					<text class="num">{{item.price}}</text>
				</view>
				<view class="help">
					<text>已帮助{{item.im_num}}人</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 服务 -->
	<popup-service ref="popupServiceRef"></popup-service>
</template>
<script setup>
	import { ref, defineComponent } from 'vue';
	import config from '@/uni.config.js';
	import popupService from './popup-service.vue';
	defineComponent({
		popupService
	});
	const popupServiceRef = ref(null);
	defineProps({
		item: Object,
		index: {
			type: Number,
			default: -1
		}
	});
	// 打开服务详情
	function openServeDetail(item) {
		popupServiceRef.value.open(item);
	}
	// 处理图片错误
	function imgError(item) {
		item.imgError = true;
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.item {
		@include flex;
		flex-wrap: nowrap;
		margin-top: 26rpx;
		padding: 20rpx;
		border-radius: 18rpx;
		background-color: #fff;
		&-0 {
			margin-top: 0;
		}
		.image {
			width: 188rpx;
			height: 188rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			flex: 1;
			margin-left: 20rpx;
			.name {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				word-break: break-all;
				overflow: hidden;
				line-height: 42rpx;
				font-weight: 700;
				font-size: 28rpx;
				color: #111;
			}
			.tags {
				max-width: 460rpx;
				height: 48rpx;
				overflow: hidden;
				margin: 12rpx -10rpx 16rpx;
				.item-tag {
					display: inline-block;
					height: 48rpx;
					line-height: 48rpx;
					margin: 0 10rpx;
					padding: 0 20rpx;
					background: #F5F5F5;
					border-radius: 4rpx;
					font-style: normal;
					font-size: 24rpx;
					color: #888;
				}
			}
			.value {
				@include flex;
				.price {
					.unit {
						font-size: 24rpx;
						color: red;
					}
					.num {
						font-weight: 700;
						font-size: 36rpx;
						color: red;
					}
				}
				.help {
					font-size: 24rpx;
					color: #888;
				}
			}
		}
	}
</style>
